<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #divdiv{
            width: 20px;  //权重问题
        }

        .divcalaa{
            width: 30px;
        }
        
    </style>
</head>
<body>
  <div id="divdiv" class="divcalaa" onclick="alert(0)" style="background-color: #8d572b"></div>
</body>
<script>
    //dom节点就是对象
    //DOM 操作就是操作对象的属性【对属性赋值】和调用对象的方法
    var _div = document.getElementById('div');  //ID
    var _div1 = document.getElementsByTagName('div')[0]; //第一个
    var _div2 = document.getElementsByClassName('divclass')[0]; //第一class
    var _div3 = document.querySelector('.divcalss');
    var _div4 = document.querySelector('.divdiv');
    var _div4 = document.querySelectorAll('.divdiv')[0];
    
    
    console.dir(_div);
    
    var div = {
        className:'',
        id:'',
        innerHTML:"<h1>hello,world</h1>",
        innerText:'',
        setAttribute:function (attrName,attrValue) {
            this.attributes[attrName] = attrValue;
        },
        hasAttribute:function () {
            return !! this.attributes[attName];
        },
        removeAttribute:function () {
            delete
        },
        getAttribute:function () {
            
        }
    }
</script>
</html>